<template>
    <div class="collpapsed_main">
        <div class="collpapsed_box" v-for="item in props.menuList" :key="item.id" v-show="!item.hide">
            <router-link v-if="!item.children" :to="item.router" style="font-size: 13px;" :class="($route.path == item.router || item.childRoutes&&item.childRoutes.includes($route.path)) ? 'routerActive' : 'notRouterActive'"> 
              <Icon :type="item.icon" size="18" :style="{color: ($route.path == item.router || item.childRoutes&&item.childRoutes.includes($route.path)) ? '#2d8cf0' : '#1f2229'}" />
              <p>{{ $t(item.name) }}</p>
            </router-link>
            <Poptip transfer placement="right-start" trigger="hover" popper-class="menu_pop" v-else>
                <!-- 这里第一层，不用循环 -->
                <div :to="item.router" style="font-size: 13px;" :class="parentId == item.id ? 'routerActive' : 'notRouterActive'"> 
                  <Icon :type="item.icon" size="18" :style="{color: parentId == item.id ? '#2d8cf0' : '#1f2229'}" />
                  <p>{{ $t(item.name) }}</p>
                </div>
                <template #content >
                    <PopItem :item="item" />
                </template>
            </Poptip>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MyCollpapsedMenu',
};
</script>
<script setup>
import { useRouter } from 'vue-router'
import { ref, watch, onMounted } from 'vue'
import PopItem from '@/pages/collpapsedMenu/item.vue'

// 路由
const router = useRouter();

// 父id
const parentId = ref(null);

// 菜单激活状态
const routerActive = ref('');
routerActive.value = router.currentRoute.value.path;

const props = defineProps({
    menuList: Array
});

// 递归函数查找对应的 ID
const findParentId = (menuList, path) => {
    const findMenuItem = (items, targetPath) => {
        for (let item of items) {
            if (item.router === targetPath || (item.children && item.children.some(child => child.router === targetPath))) {
                return item;
            }
        }
        return null;
    };
    const matchedItem = findMenuItem(menuList, path);
    return matchedItem ? matchedItem.id : null;
};

// 监听路由变化
watch(
    () => router.currentRoute.value,
    (val) => {
        routerActive.value = val.path;
        console.log(routerActive.value)
        parentId.value = findParentId(props.menuList, val.path);
    },
    { immediate: true }
)

onMounted(() => {
  routerActive.value = router.currentRoute.value;
  parentId.value = findParentId(props.menuList, router.currentRoute.value);
})

</script>

<style scoped lang="scss">
.collpapsed_main {
    height: calc(100% - 64px);
    overflow-y: auto;
    .flex-column {
      display: flex;
      flex-direction: column;
    }

    &::-webkit-scrollbar {
        /* 对应纵向滚动条的宽度 */
        width: 3px;
        /* 对应横向滚动条的宽度 */
        height: 10px;
    }

    /* 滚动条上的滚动滑块 */
    &::-webkit-scrollbar-thumb {
        background-color: #2DB7F5;
        // border-radius: 32px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        // border-radius: 32px;
    }

    .collpapsed_box {
        width: 80px;
        text-align: center;
        cursor: pointer;
        padding: 14px 10px;
    }

}
</style>
